<template>
    <div class="body_one">
        <!-- 左边为网址名 -->
        <div class="body_one_1">
            <span @click="GoZhuye">Finger 博客</span>
        </div>
        <!-- 右边头像和用户名 -->
        <div class="body_one_2">
            <el-button @click="GoLook">返回首页</el-button>
        </div>
    </div>
</template>
<script>
import {useRoute, useRouter} from 'vue-router'
import {ElLoad} from '@/Element-api/ElLoading.js'
export default {
    setup(context){
        // console.log(context);
        const router = useRouter()
        // 点击按钮，返回首页
        const GoLook =()=>{
            const loading = ElLoad('返回中')
            setTimeout(()=>{
                // 1秒后关闭计时器
                loading.close()
                router.push('/look')
            },1000)
        }
        const GoZhuye = () =>{
            const loading = ElLoad('主页.....')
            setTimeout(()=>{
                // 1秒后关闭计时器
                loading.close()
                router.push('/look')
            },1000)
        }
        return{
            GoLook,
            GoZhuye
        }
    }
}
</script>
<style lang="less" scoped>
   .body_one{
        width: 100%;
        height: 80px;   
        line-height: 80px;
        position: relative;
        border-bottom: 1px solid #ccc;
        .body_one_1{
            width: 200px;
            height: 100%;
            text-align: center;
            position: absolute;
            left: 100px;
            span{
                color: rgb(121, 121, 121);
                font-size: 25px;
                cursor: pointer;
            }
        }
        .body_one_2{
            width: 300px;
            height: 100%;
            position: absolute;
            right: 50px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
    }
</style>

